<template>
  <a-layout>
    <a-layout>
      <a-layout style="padding: 0 24px">
        <a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">
          <a-row>
            <a-col :span="8">
              <a-input v-model:value="searchObj.name" size="middle" placeholder="查询名称"/>
            </a-col>
            <a-col :span="8">
              <a-button size="middle" type="primary" @click="handlerSearch">查询</a-button>
              <a-button size="middle" type="primary" @click="handlerAdd">新增</a-button>
            </a-col>
          </a-row>

          <a-table :columns="columns"
                   :rowKey="record => record.id"
                   :data-source="users"
                   :loading="loading"
                   :pagination="false">
            <template v-slot:action="{text,record}">
              <a-button size="middle" type="primary" @click="handlerEdit(record)">编辑</a-button>
              <a-button size="middle" type="primary" @click="">重置</a-button>
              <a-button size="middle" :danger="true" @click="handlerRemove(record.id)">删除</a-button>
            </template>
          </a-table>
          <mine-pagination :current="current" :size="size" :total="total"
                           @init-table-data="handlerPageChangerQuery"></mine-pagination>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>

  <a-modal
      v-model:visible="modalVisible"
      :confirm-loading="modalConfirmLoading"
      title="用户列表"
      @ok="handlerModalOk">
    <a-form :model="formUser" :label-col="formLabelCol" :wrapper-col="formWrapperCol">
      <a-form-item label="昵称">
        <a-input v-model:value="formUser.nickName"/>
      </a-form-item>
      <a-form-item label="账号">
        <a-input v-model:value="formUser.account"/>
      </a-form-item>
      <a-form-item label="密码" v-if="!isEdit">
        <a-input v-model:value="formUser.password"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import * as user from '@/api/wiki/user'
import {onMounted, ref} from "vue";
import MinePagination from "../../components/mine-pagination";
import {message, Modal} from "ant-design-vue";

export default {
  name: "User",
  components: {MinePagination},
  setup() {
    const current = ref(1)
    const size = ref(10)
    const total = ref(5)
    const users = ref([])
    const searchObj = ref({})
    const loading = ref(true)
    const columns = ref([{
      title: '昵称',
      dataIndex: 'nickName',
    }, {
      title: '登录账号',
      dataIndex: 'account',
    }, {
      title: '密码',
      dataIndex: 'password',
    },{
      title: '操作',
      dataIndex: 'action',
      slots: {customRender: 'action'}
    }])
    //对话框是否可见
    const modalVisible = ref(false)
    //确定按钮 loading
    const modalConfirmLoading = ref(false)
    const formUser = ref({})
    const formLabelCol = ref({span: 4})
    const formWrapperCol = ref({span: 14})
    const isEdit = ref(false)


    const handlerQueryInit = (params) => {
      if (!params) {
        params = {
          current: current.value,
          size: size.value,
        }
      }
      user.users(params).then(res => {
        loading.value = false
        let result = res.data
        users.value = result.records
        current.value = result.current
        size.value = result.size
        total.value = result.total
      });
    }

    const handlerSearch = () => {
      searchObj.value.current = current.value
      searchObj.value.size = size.value
      handlerQueryInit(searchObj.value)
    }
    const handlerPageChangerQuery = (params) => {
      handlerQueryInit(params)
    }
    const handlerEdit = (record) => {
      modalVisible.value = true
      isEdit.value = true
      formUser.value = JSON.parse(JSON.stringify(record))
    }
    const handlerAdd = () => {
      modalVisible.value = true
      isEdit.value = false
      formUser.value = {}
    }
    const handlerRemove = (id) => {
      Modal.confirm({
        title: '删除',
        content: '确定要删除这些数据吗?',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          user.remove(id).then(res => {
            if (res.status === 200) {
              message.success(res.msg);
              handlerQueryInit()
            } else {
              message.error(res.msg);
            }
          })
        },
        onCancel() {
        }
      })
    }

    const handlerModalOk = () => {
      modalConfirmLoading.value = true
      if (formUser.value.id) {
        user.update(formUser.value).then(res => {
          modalVisible.value = false
          modalConfirmLoading.value = false
          if (res.status === 200) {
            message.success(res.msg);
            handlerQueryInit()
          } else {
            message.error(res.msg);
          }
        })
      } else {
        user.save(formUser.value).then(res => {
          modalVisible.value = false
          modalConfirmLoading.value = false
          if (res.status === 200) {
            message.success(res.msg);
            handlerQueryInit()
          } else {
            message.error(res.msg);
          }
        })
      }
    }

    onMounted(() => {
      handlerQueryInit()
    })

    return {
      // 表格
      users,
      loading,
      columns,
      //搜索
      searchObj,
      //分页
      current,
      size,
      total,
      //对话框
      modalVisible,
      modalConfirmLoading,
      //form表单
      formUser,
      formLabelCol,
      formWrapperCol,
      isEdit,

      //初始化表格数据
      handlerQuery: handlerQueryInit,
      //搜索
      handlerSearch,
      //切换分页
      handlerPageChangerQuery,
      //编辑
      handlerEdit,
      //新增
      handlerAdd,
      //删除
      handlerRemove,
      //提交表单
      handlerModalOk
    }

  }
}
</script>

<style scoped>

</style>
